<template>
  <div class="container mb15">
    <div class="banner mt15 ">
      <img src="../../assets/images/setting-banner.png" alt="">
    </div>
    <div class="wxkj-tab">
      <el-tabs v-model="tab">
        <el-tab-pane label="公司基本信息" name="0">
          <el-card class="box-card">
            <div class="wxkj-icon-title">
              <span class="icon" />
              <span>公司基本信息</span>
            </div>
            <div class="content-center pt30 pb30">
              <el-form ref="form1" :model="form" label-width="120px" :rules="rules">
                <el-form-item label="企业logo：" prop="enLogo">
                  <!-- <el-upload
                    ref="logo"
                    class="uploader-item"
                    :action="$uploadUrl"
                    accept=".jpg,.png,.jpeg"
                    :data="{'biz':'public/ent/' + new Date().getFullYear() + '/' + parseInt(new Date().getMonth() + 1)}"
                    :headers="{'X-Access-Token':token}"
                    :show-file-list="false"
                    :on-success="logoUpload"
                    :before-upload="beforeAvatarUpload"
                    :limit="1"
                  >
                    <img v-if="enLogo" :src="enLogo" class="avatar">
                    <i v-else class="el-icon-plus uploader-item-icon" />
                  </el-upload> -->
                  <div class="logo-wrap">
                    <upload-cropper
                      ref="uploadCropper"
                      class="wrap"
                      :return-obj="true"
                      :enlarge="2"
                      :init-img="enLogo"
                      :tip-content="'只支持JPG格式,建议使用大小不要超过1000k、350*150像素的图片'"
                      :fixed-number="[350,150]"
                      @upload="getUploadImgId"
                    />
                  </div>
                </el-form-item>
                <el-form-item label="企业名称：" prop="enName">
                  <el-input v-model="form.enName" disabled />
                </el-form-item>
                <el-form-item label="所属专场：">
                  <el-select v-model="form.affUnit" clearable placeholder="请选择">
                    <el-option
                      v-for="item in deptOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="所属行业：" prop="enTrade">
                  <el-cascader v-model="form.enTrade" disabled :options="tradeData" style="width: 100%;" />
                </el-form-item>
                <el-form-item label="企业性质：" prop="enNature">
                  <el-select v-model="form.enNature" clearable disabled style="width: 100%;" placeholder="请选择">
                    <el-option v-for="(item,index) in enNature" :key="index" :label="item" :value="item" />
                  </el-select>
                </el-form-item>
                <el-form-item label="层级：" required prop="enGrade">
                  <el-select v-model="form.enGrade" clearable placeholder="请选择">
                    <el-option
                      v-for="item in enGradeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>

                <el-form-item label="人员规模：" prop="enPersonnel">
                  <el-select v-model="form.enPersonnel" clearable style="width: 100%;" placeholder="请选择">
                    <el-option v-for="(item,index) in scale" :key="index" :label="item.label" :value="item.value" />
                  </el-select>
                </el-form-item>
                <el-form-item label="企业地址：" prop="enAddress">
                  <el-cascader ref="areaSelect" v-model="form.enAddress" :options="areaData" style="width: 100%;" @change="chooseAddress('areaSelect')" />
                </el-form-item>
                <!--                <el-form-item label="详细地址：" prop="enLocation">
                  <el-row>
                    <el-col :span="20">
                      <el-input v-model="form.enLocation" :disabled="!form.lng||!form.enLocation" />
                    </el-col>
                    <el-col :span="4">
                      <el-button
                        class="fr"
                        icon="el-icon-location"
                        @click="graspLongLat"
                      />
                    </el-col>
                  </el-row>
                </el-form-item>-->
                <el-form-item label="详细地址：" prop="enLocation">
                  <el-input v-model="form.enLocation" placeholder="请准确填写详细地址" />
                </el-form-item>
                <el-form-item label="企业网址：" prop="address">
                  <el-input v-model="form.address" />
                </el-form-item>
                <el-form-item class="tc">
                  <el-button type="primary" @click.native="saveInfo('form1')">保存</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="公司介绍" name="1">
          <el-card class="box-card">
            <div class="wxkj-icon-title">
              <span class="icon" />
              <span>公司介绍</span>
            </div>
            <div class="content">
              <div class="explain">简单介绍下公司的发展状况、公司愿景、公司使命、主要经营业务领域等</div>
              <el-form ref="form2" :model="form" label-width="0">
                <el-form-item prop="introduce">
                  <el-input
                    v-model="form.introduce"
                    type="textarea"
                    :rows="8"
                    :maxlength="200"
                    placeholder="请输入内容"
                    show-word-limit
                  />
                </el-form-item>
              </el-form>
              <div class="mt30 tc">
                <el-button type="primary" @click.native="saveInfo('form2')">保存</el-button>
              </div>
            </div>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="公司福利" name="2">
          <el-card class="box-card">
            <div class="wxkj-icon-title">
              <span class="icon" />
              <span>公司福利</span>
            </div>
            <div class="content mt30">
              <el-form ref="form3" :model="form" label-width="100px" label-position="left">
                <el-form-item label="工作时间：">
                  <el-col :span="4" class="mr10" prop="workStart">
                    <el-time-picker v-model="form.workStart" :value-format="pickerOptions.format" :picker-options="pickerOptions" placeholder="上班时间" style="width: 100%;" />
                  </el-col>
                  <el-col :span="4" class="ml10" prop="workEnd">
                    <el-time-picker v-model="form.workEnd" :value-format="pickerOptions.format" :picker-options="pickerOptions" placeholder="下班时间" style="width: 100%;" />
                  </el-col>
                </el-form-item>
                <el-form-item label="加班情况：" prop="workOvertime">
                  <el-radio-group v-model="form.workOvertime">
                    <el-radio label="不加班" border>不加班</el-radio>
                    <el-radio label="偶尔加班" border>偶尔加班</el-radio>
                    <el-radio label="弹性工作" border>弹性工作</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="休息情况：">
                  <el-radio-group v-model="form.rest" prop="rest">
                    <el-radio label="双休" border>双休</el-radio>
                    <el-radio label="单休" border>单休</el-radio>
                    <el-radio label="大小周" border>大小周</el-radio>
                    <el-radio label="排版轮休" border>排版轮休</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="其他福利：" prop="otherWelfare">
                  <el-checkbox-group v-model="form.otherWelfare">
                    <el-checkbox label="五险一金" border>五险一金</el-checkbox>
                    <el-checkbox label="带薪年假" border>带薪年假</el-checkbox>
                    <el-checkbox label="定期体检" border>定期体检</el-checkbox>
                    <el-checkbox label="员工旅游" border>员工旅游</el-checkbox>
                    <el-checkbox label="节日福利" border>节日福利</el-checkbox>
                    <el-checkbox label="餐补" border>餐补</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item class="">
                  <el-button type="primary" @click.native="saveInfo('form3')">保存</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-card>

        </el-tab-pane>
        <el-tab-pane label="公司相册" name="4">
          <el-card class="box-card">
            <div class="wxkj-icon-title">
              <span class="icon" />
              <span>公司相册</span>
            </div>
            <div class="content">
              <div class="explain">建议添加公司办公环境、团队建设等相关照片</div>
            </div>
            <el-form ref="form4" :model="form" label-width="0px" label-position="left">
              <div class="upload-wrap">
                <el-upload
                  ref="uploadLicense"
                  accept=".jpg,.png,.jpeg"
                  :class="[form.enPic.split(',').length>=5?'hidBtn':'']"
                  list-type="picture-card"
                  :action="$uploadUrl"
                  :data="{'biz':'public/ent/' + new Date().getFullYear() + '/' + parseInt(new Date().getMonth() + 1)}"
                  :headers="{'X-Access-Token':token}"
                  :on-success="picSuccess"
                  :on-remove="picRemove"
                  :limit="10"
                  :file-list="fileList"
                  :multiple="true"
                >
                  <i class="el-icon-plus uploader-item-icon" />
                </el-upload>
              </div>
              <el-form-item class="mt30">
                <el-button type="primary" @click.native="saveInfo('form4')">保存</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!--    <map-dialog ref="map" @returnInfo="getMapInfo" />-->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import uploadCropper from '@/components/uploadCropper'
// import mapDialog from '@/components/CurriculumVitaeEditDrawer/components/mapDialog'
import store from '@/store'
import { enInfoEdit } from '@/api/settings'
export default {
  name: '',
  components: { /* mapDialog,*/ uploadCropper },
  props: {},
  data() {
    return {
      tab: 0,
      form: {
        'id': '',
        'enName': '', // 企业名称
        'enLogo': '', // 企业LOGO
        'enTrade': [], // 所属行业
        'enNature': '', // 企业性质
        'enPersonnel': '', // 人员规模
        'address': '', // 企业网址
        'introduce': '', // 公司介绍
        'workStart': '', // 工作开始时间
        'workEnd': '', // 工作结束时间
        'workOvertime': '', // 加班情况
        'rest': '', // 休息情况
        'otherWelfare': [], // 其他福利
        'enPic': '', // 附件id
        'lng': '',
        'lat': '',
        'enLocation': '',
        // 'backgroundPic': '', // 背景图
        'enAddress': [] // 企业地址
      },
      enLogo: '',
      areaData: [],
      tradeData: [],
      fileList: [],
      rules: {
        enLogo: [
          { required: true, message: '请上传企业LOGO' }
        ],
        enPersonnel: [
          { required: true, message: '请选择人员规模' }
        ],
        enAddress: [
          { required: true, message: '请选择企业地址' }
        ],
        enLocation: [
          { required: true, message: '请选择企业地址' }
        ],
        introduce: [
          { required: true, message: '请输入企业介绍' }
        ],
        otherWelfare: [
          { required: true, message: '请选择其他福利' }
        ],
        enGrade: [
          { required: true, message: '请选择层级' }
        ]
      },
      pickerOptions: {
        format: 'HH:mm'
      },
      points: null,
      enGradeOptions: [
        { label: '无', value: '0' },
        { label: '专精特新中小企业', value: '1' },
        { label: '专精特新“小巨人”企业', value: '2' }
      ],
      deptOptions: [
        { label: '无', value: '0' },
        { label: '河南省工信厅', value: 'gxt' }
      ]
    }
  },
  computed: {
    ...mapGetters([
      'token',
      'enNature',
      'scale',
      'companyInfo'
    ])
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    console.log(this.companyInfo.enInfo, '123')
    Object.keys(this.form).forEach(item => {
      if (this.companyInfo.enInfo[item]) this.form[item] = this.companyInfo.enInfo[item]
    })
    console.log(this.form)
    if (this.form.otherWelfare && !Array.isArray(this.form.otherWelfare)) {
      this.form.otherWelfare = this.form.otherWelfare?.split(',')
    }

    if (this.companyInfo.enInfo.lat && this.companyInfo.enInfo.lng) {
      this.points = { center: this.companyInfo.enInfo.lng + ',' + this.companyInfo.enInfo.lat, label: this.companyInfo.enInfo.city_dictText }
    }
    if (this.companyInfo.enInfo.enPic) {
      const enPic = this.companyInfo.enInfo.enPic.split(',')
      const enPic_dict = this.companyInfo.enInfo.enPic_dictText.split(',')
      enPic.forEach((item, index) => {
        const obj = new Object()
        obj.url = enPic_dict[index]
        obj.fileId = item
        this.fileList.push(obj)
      })
    }

    if (this.companyInfo.enInfo.enLogo_dictText) this.enLogo = this.companyInfo.enInfo.enLogo_dictText

    console.log('area', this.$store.state.app.areaData)
    // 城市数据
    if (this.$store.state.app.areaData.length === 0) {
      const res = await store.dispatch('app/getArea', 'area')
      this.areaData = res.result
    } else {
      this.areaData = this.$store.state.app.areaData
    }
    // 行业数据
    if (this.$store.state.app.tradeData.length === 0) {
      const res = await store.dispatch('app/getTrade', 'industry')
      this.tradeData = res.result
    } else {
      this.tradeData = this.$store.state.app.tradeData
    }
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 销毁
  destroyed() {},
  // 方法
  methods: {
    getUploadImgId(e) {
      console.log(e)
      this.$refs.form1.clearValidate('enLogo')
      this.form.enLogo = e.fileId
      this.$store.commit('user/SET_AVATAR', e.url)
    },
    chooseAddress(e) {
      const pnode = this.$refs[e].getCheckedNodes()[0].parent.data
      this.points = { center: pnode.center, label: pnode.label }
    },
    /* graspLongLat() {
      console.log(this.points , 'this.points')
      this.$refs.map.show(this.points)
    },*/
    // 获取地图信息
    /* getMapInfo(arr, address) {
      console.log(address)
      this.form.lng = arr[0]
      this.form.lat = arr[1]
      if (address) {
        this.form.enLocation = address
      }
      this.$refs.form1.clearValidate('enLocation')
    },*/
    saveInfo(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          console.log(this.form)
          const prams = Object.assign({}, this.form)
          if (prams.enTrade) {
            prams.enTrade = prams.enTrade.join(',')
          }
          if (prams.enAddress) {
            prams.province = prams.enAddress[0]
            prams.city = prams.enAddress[1]
            prams.enAddress = prams.enAddress.join(',')
          }
          if (prams.otherWelfare) {
            prams.otherWelfare = prams.otherWelfare.join(',')
          }
          enInfoEdit(prams).then(response => {
            this.$message.success('修改成功！')
          })
        }
      })
    },
    logoUpload(res, file) {
      console.log(res)
      this.$refs.form1.clearValidate('enLogo')
      this.form.enLogo = res.result.fileId
      this.enLogo = res.result.url
      this.$refs['logo'].clearFiles()// 清空上传列表
    },
    beforeAvatarUpload(file) {
      const istu = file.type
      // const isLt2M = file.size / 1024 / 1024 < 2
      if (istu !== 'image/png' && istu !== 'image/jpeg') {
        this.$message.error('图片格式不正确!')
      }
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 2MB!')
      // }
      return istu
      // return isJPG && isLt2M
    },
    picSuccess(res, file, fileList) {
      this.picRemove(file, fileList)
    },
    picRemove(file, fileList) {
      console.log(file, fileList)
      const pics = []
      fileList.forEach(item => {
        if (item.response) {
          pics.push(item.response.result.fileId)
        }
        if (item.fileId) {
          pics.push(item.fileId)
        }
      })
      this.form.enPic = pics.join(',')
    }
  }
}
</script>
<style lang="scss" scoped>
  .banner{
	width: 100%;
    // height: 140px;
    img{
      display: block;
      width: 100%;
    }
  }
  .content-center{
    width: 500px; margin: 0 auto;
  }
  .content{padding: 0 20px;
    .explain{font-size:14px;font-weight:400;line-height:24px;color:#666666;margin-top: 12px; margin-bottom: 23px;}
  }
  .uploader-item{
    width: 100px;
    height: 100px;
  }
  ::v-deep .el-upload-list--picture-card .el-upload-list__item{
    width: 100px;
    height: 100px;
    float: left;
    position: relative;
    .el-progress-circle{
      display: none !important;
    }
  }
  ::v-deep .el-radio--medium.is-bordered,::v-deep .el-checkbox.is-bordered.el-checkbox--medium,::v-deep  .el-radio.is-bordered + .el-radio.is-bordered{
    margin:0 1px;
  }
  ::v-deep .el-upload{
    width: 100px;
    height: 100px;
    border: 1px dashed #d9d9d9;
    cursor: pointer;
    position: relative;
    border-radius: 6px;
    background: none;
    .avatar{
      width: 98px;
      height: 98px;
    }
    .uploader-item-icon {
      display: block;
      font-size: 28px;
      color: #8c939d;
      width: 98px;
      height: 98px;
      line-height: 98px;
      text-align: center;
    }
  }
  .logo-wrap{
    ::v-deep .el-upload{
      width: 175px;
      height: 75px;
      line-height: 73px;
    }
  }
  .upload-wrap{
    &::after{
      display: block;
      content: "";
      clear: both;
    }
  }
  .hidBtn{
    ::v-deep .el-upload--picture-card{
      display:none;   /* 上传按钮隐藏 */
    }
  }
</style>
